<template>
	<div class="website-box">
		<div class="website-head">
			<div class="website-head_cto">
				<div class="website-head_igbox">
					<img class="website-head_ig" :src="viewModel" />
					<div class="website-head_it1">{{cofigList.webSiteName}}</div>
				</div>
				<div class="website-head_ul">
					<div class="website-head_h1" :class="currentIndex==tabIndex?'website-head_fwcore':''" @click="routerPush(tabItem.url),currentIndex=tabIndex" v-for="(tabItem,tabIndex) in tabList" :key="tabIndex">{{tabItem.name}}
						<div class="website-head_hve" v-if="currentIndex==tabIndex"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="website-mark"></div>
		<router-view></router-view>
		<div class="website-footer">
			<div class="footer-box">
				<div class="footer-box_mkt">
					<p class="footer-box_t1">联系我们</p>
					<div class="footer-box_line"></div>
					<p class="footer-box_t2">{{cofigList.tel}}</p>
					<p class="footer-box_t3">周一至周日 9:00-19:00</p>
					<div class="footer-box_cot">
						<p class="footer-box_t4">商务合作：{{cofigList.domainName}}</p>
						<p class="footer-box_t4">联系地址：{{cofigList.address}}</p>
					</div>
					<p class="footer-box_t5">{{cofigList.webSiteRecordNo}} {{cofigList.webSiteRecordSecurityNo}}</p>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import QRCode from 'qrcodejs2'
	export default {
		data() {
			return {
				tabList: [{
						name: '首页',
						url: '/web/home'
					}, {
						name: 'APP下载',
						url: '/web/download'
					},
					{
						name: '加入我们',
						url: '/web/joinus'
					},
					{
						name: '隐私协议',
						url: '/web/private'
					}
				],
				viewModel: {},
				cofigList: {},
				currentIndex: 0
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.viewModel = await this.$api.configLogo()
				this.cofigList = await this.$ala.httpGet('api/AutoConfig/Get', {
					type: 'WebSiteConfig'
				})
			},
			routerPush(rUrl) {
				this.$router.push(rUrl)
			}
		}
	}
</script>
<style lang="scss">
	.website-box {
		.website-head {
			width: 100%;
			background-color: #FFFFFF;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99;

			.website-head_cto {
				width: 1002px;
				height: 76px;
				margin: auto;
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: space-between;

				.website-head_igbox {
					display: flex;
					align-items: center;

					.website-head_it1 {
						font-size: 20px;
						color: #333333;
						font-weight: bold;
						margin-left: 10px;
					}
				}

				.website-head_ig {
					width: 55px;
					height: 55px;
				}

				.website-head_ul {
					display: flex;
					flex-direction: row;
					align-items: center;

					.website-head_h1 {
						width: 100px;
						text-align: center;
						height: 76px;
						line-height: 76px;
						font-size: 15px;
						color: #000a1f;
						cursor: pointer;
						box-sizing: border-box;
						position: relative;

						.website-head_hve {
							width: 35px;
							height: 3px;
							border-radius: 3px;
							background-color: #116EFF;
							position: absolute;
							bottom: 15px;
							left: 50%;
							transform: translateX(-50%);
						}
					}

					.website-head_h1:hover {
						color: #333333;
						font-weight: bold;
					}

					.website-head_fwcore {
						font-weight: bold;
					}
				}
			}
		}

		.website-mark {
			height: 76px;
		}

		.website-footer {
			width: 100%;
			height: 464px;
			background-color: #1f222c;

			.footer-box {
				width: 1002px;
				height: 464px;
				padding-top: 90px;
				margin: auto;
				background: url('https://tongyuan.5ug.com/wwwroot/uploads/api/957-505-284/2021-08-25/61260110cc7683fe42ec8edb.png') no-repeat;
				background-size: 506px 464px;
				background-position: right;
			}

			.footer-box_t1 {
				font-size: 36px;
				font-weight: 500;
				margin-bottom: 20px;
				color: #FFFFFF;
			}

			.footer-box_line {
				width: 72px;
				height: 4px;
				background: #fff;
				margin-bottom: 20px;
			}

			.footer-box_t2 {
				font-size: 42px;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 60px;
			}

			.footer-box_t3 {
				font-size: 16px;
				opacity: .6;
				font-weight: 300;
				color: #FFFFFF;
			}

			.footer-box_cot {
				margin: 20px 0 24px;

				.footer-box_t4 {
					font-size: 16px;
					color: #FFFFFF;
					line-height: 24px;
				}
			}

			.footer-box_t5 {
				font-size: 14px;
				color: #FFFFFF;
			}
		}
	}
</style>